<template>
    <div>
        <div style="margin: 10px 0">
            <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"
                      v-model="username"></el-input>
            <el-date-picker
                    style="margin-left: 10px"
                    v-model="time"
                    type="date"
                    value-format="yyyy-MM-dd"
                    :formatter="dateFormat"
                    placeholder="选择日期">
            </el-date-picker>

            <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>

        <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
                  @selection-change="handleSelectionChange" size="medium">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <!--<el-table-column prop="username" label="举报人"></el-table-column>-->
            <el-table-column prop="articleName" label="举报文章"></el-table-column>
            <el-table-column prop="author" label="文章作者"></el-table-column>
            <el-table-column prop="articleId" label="文章ID"></el-table-column>

            <el-table-column label="详情" width="200" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" @click="details(scope.row)"
                               title="详情">举报详情</el-button>

                </template>
            </el-table-column>

            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" @click="update1(scope.row)" icon="el-icon-edit" circle
                               title="解封"></el-button>
                    <el-button title="封禁" type="success" @click="edit(scope.row)" icon="el-icon-check"
                               circle></el-button>
                </template>
            </el-table-column>
        </el-table>

        <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <!--弹窗-->

        <el-dialog title="举报列表" :visible.sync="userVis" width="40%">
            <el-table :data="bookList" stripe border>

                <el-table-column prop="username" label="举报人"></el-table-column>
                <el-table-column prop="due" label="举报原因"></el-table-column>
                <el-table-column prop="detail" label="举报详情"></el-table-column>
                <el-table-column prop="time" label="举报时间" :formatter="dateFormat"></el-table-column>
            </el-table>
        </el-dialog>


    </div>
</template>

<script>
    import request from '../utils/request'

    export default {
        name: "Report",
        data() {
            return {
                bookList: [],
                userVis: false,
                form: {},
                dialogVisible: false,
                tableData: [],
                time: '',
                due: '',
                username: '',
                multipleSelection: [],
                pageNum: 1,
                pageSize: 5,
                total: 0,
                forms: {}
            }
        },
        created() {
            this.load()
        },
        methods: {

            details(row) {
                console.log(row)
                this.userVis = true
                request.get("/report/selectReportName/" + row.articleName).then(res => {
                    console.log(res)
                    this.bookList = res.data
                })

            },


            dateFormat(row, column, cellValue, index) {
                console.log(row, column, cellValue, index)
                const daterc = row[column.property]
                if (daterc != null) {
                    var date = new Date(daterc);
                    var year = date.getFullYear();
                    /* 在日期格式中，月份是从0开始，11结束，因此要加0
                     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                     * */
                    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                    // 拼接
                    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
                }
            }
            ,

            //更新
            save() {
                request.post('/file/update', this.form).then(res => {
                    if (res.code === 20000) {
                        this.$toast({message: '更新成功', type: "success"})
                        this.dialogVisible = false
                    } else {
                        this.$toast({message: '更新失败', type: "success"})
                    }
                })
            },


            update1(row) {
                this.$confirm('确定要解封此篇文章, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(row)
                    this.forms.id = row.articleId
                    this.forms.isEnable = true
                    request.put("/article/updateArticle", this.forms).then(res => {
                        console.log(res)
                        if (res.code === 20000) {
                            this.$toast({
                                type: 'success',
                                message: '解封成功'
                            });
                        }

                    })


                }).catch(() => {
                    this.$toast({
                        type: 'success',
                        message: '已取消删除'
                    });
                });
            },

//编辑
            edit(row) {

                this.$confirm('确定要封禁此篇文章, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(row)
                    this.forms.id = row.articleId
                    this.forms.isEnable = false
                    request.put("/article/updateArticle", this.forms).then(res => {
                        console.log(res)
                        if (res.code === 20000) {
                            this.$toast({
                                type: 'success',
                                message: '封禁成功'
                            });
                        }

                    })


                }).catch(() => {
                    this.$toast({
                        type: 'success',
                        message: '已取消删除'
                    });
                });
            },

            load() {
                //UTC时间格式.toJSON().split('T')[0]截取后格式：2019-10-14
                let localTime = new Date(this.time).toJSON()
                this.time = (localTime || "").split('T')[0]
                console.log(this.time)
                /* request.get("/report/page", {
                     params: {
                         pageNum: this.pageNum,
                         pageSize: this.pageSize,
                         username: this.username,
                         time: this.time,
                         due:this.due
                     }
                 }).then(res => {

                     console.log(res)

                     this.tableData = res.records
                     this.total = res.total

                 })*/
                request.get("/report/select").then(res => {
                    console.log(res)
                    this.tableData = res.data
                    this.total = res.length
                })
            },

            handleSelectionChange(val) {

                this.multipleSelection = val

            },

            reset() {
                this.name = ""
                this.time = ''
                this.load()
            },
            handleSizeChange(pageSize) {
                console.log(pageSize)
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {
                console.log(pageNum)
                this.pageNum = pageNum
                this.load()
            },

        }
    }
</script>

<style scoped>

</style>
